<template>
	<div class="side">
		<div class="flex flex-pack-justify flex-align-center">
			<span>组织部门</span>
			<a-space :size="0">
				<!--  v-has="'sys:deptlist'" -->
				<a-button type="link">
					<router-link to="/sysManage/deptlist"><a-icon type="edit" /></router-link>
				</a-button>
				<a-button type="link" @click="refreshTree()"><a-icon type="sync" /></a-button>
			</a-space>
		</div>
		<div class="flex">
			<a-input-search class="flex-1" v-model="searchValue" placeholder="筛选部门" @search="searchTree()" allow-clear />
			<a-button @click="cancelSearch" v-if="showlist" class="ant-btn-yellow" style="padding: 0 10px; margin-left: 5px;">取消</a-button>
		</div>
		<!-- 	:load-data="getDeptTree" -->
		<div class="deptTree">
			<a-tree
				v-if="!showlist"
				:tree-data="deptTreeData"
				:expanded-keys="expandedKeys"
				:auto-expand-parent="autoExpandParent"
				:replaceFields="replaceFields"
				:selectedKeys.sync="treeKeys"
				:loadedKeys="loadedKeys"
				@select="selectTree"
				@expand="onExpand"
			>
				<template slot="title" slot-scope="{ deptName, deptType }">
					<i class="iconfont icon-dept-other"></i>
					<span v-if="deptName.indexOf(searchValue) > -1" :title="deptName">
						{{ deptName.substr(0, deptName.indexOf(searchValue)) }}
						<span style="color: #f50">{{ searchValue }}</span>
						{{ deptName.substr(deptName.indexOf(searchValue) + searchValue.length) }}
					</span>
					<span v-else>{{ deptName }}</span>
				</template>
			</a-tree>

			<div class="dept" v-if="showlist" v-infinite-scroll="handleInfiniteOnLoad" :infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
				<a-spin :spinning="loading" style="height: 100%;">
					<a-menu v-model="menuselectedKeys">
						<a-menu-item :key="item.deptId" @click="handerDept(item)" v-for="(item, index) in deptlist">
							<i class="iconfont icon-dept-other"></i>
							{{ item.deptName }}
						</a-menu-item>
					</a-menu>
				</a-spin>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { sysManageapi } from '@/api/index.js';
import infiniteScroll from 'vue-infinite-scroll';
export default {
	name: 'deptTree',
	props: {},
	data() {
		return {
			treeKeys: [],
			autoExpandParent: false,
			expandedKeys: [],
			loadedKeys: [],
			searchValue: '',
			replaceFields: { children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' },
			pageNumber: 1,
			pageSize: 20,
			deptlist: [],
			menuselectedKeys: [],
			loading: false,
			busy: false,
			showlist: false,
			deptTreeData: []
		};
	},
	computed: {
		...mapState(['allFarmDeptTree'])
		//  deptTreeData() {
		// 	this.treeKeys = [];
		// 	if (!this.orgId) {
		// 		return this.allFarmDeptTree;
		// 	} else {
		// 		return this.allFarmDeptTree.filter(item => item.orgId == this.orgId);
		// 	}

		// }
	},
	watch: {
		orgId(newval, oldval) {
			if (newval != oldval) {
				this.treeKeys = [];
				if (this.orgId != 1) {
					this.getDeptTree();
				}
			}
		}
	},
	directives: { infiniteScroll },
	props: {
		orgId: {
			type: [String, Number],
			default: null
		}
	},
	created() {
		// if (this.allFarmDeptTree.length == 0) {
		this.getDeptTree();
		// }
	},
	methods: {
		...mapMutations(['SET_ALLFARMDEPTTREE']),
		getDeptTree() {
			this.confirmLoading = true;
			this.$postAction(sysManageapi.deptUrl.getList, {
				orgId: this.orgId || null
			})
				.then(res => {
					if (res && res.code == 1) {
						// this.SET_ALLFARMDEPTTREE(res.data);
						this.deptTreeData = JSON.parse(JSON.stringify(res.data));
					}
				})
				.finally(() => {
					this.confirmLoading = false;
				});
		},
		/* 刷新树节点 */
		refreshTree() {
			this.showlist = false;
			this.loadedKeys = [];
			this.expandedKeys = [];
			this.treeKeys = [];
			this.$emit('selected', null);
			this.getDeptTree();
		},
		/* 筛选部门树 */
		searchTree() {
			if (this.searchValue) {
				this.showlist = true;
				this.pageNumber = 1;
				this.getDeptlist();
			} else {
				this.showlist = false;
			}
		},
		/* 选中部门，刷新列表 */
		selectTree(selectedKeys, e) {
			let selectedDept = null;
			if (selectedKeys && selectedKeys.length > 0) {
				selectedDept = { ...e.node.dataRef };
			}
			this.$emit('selected', selectedDept);
		},
		onExpand(expandedKeys) {
			this.expandedKeys = expandedKeys;
			this.autoExpandParent = false;
		},
		getDeptlist() {
			this.loading = true;
			this.$postAction(sysManageapi.deptUrl.getDeptlist, {
				deptName: this.searchValue,
				orgId: this.orgId,
				pageNumber: this.pageNumber,
				pageSize: this.pageSize
			})
				.then(res => {
					if (res && res.code == 1) {
						let list = [];
						if (this.pageNumber == 1) {
							list = res.data.list;
						} else {
							list = this.deptlist.concat(res.data);
						}
						this.deptlist = [...list];
						this.busy = this.deptlist.length == res.total;
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handerDept(dept) {
			if (this.menuselectedKeys.length > 0 && dept.deptId == this.menuselectedKeys[0]) {
				this.menuselectedKeys = [];
				this.$emit('selected', null);
			} else {
				this.$emit('selected', dept);
			}
		},
		handleInfiniteOnLoad() {
			if (!this.busy && !this.loading) {
				this.pageNum++;
				this.getDeptlist();
			}
		},
		cancelSearch() {
			this.showlist = false;
			this.menuselectedKeys = [];
			this.treeKeys = [];
			this.$emit('selected', null);
		},
		cancelSelect() {
			this.showlist = false;
			this.menuselectedKeys = [];
			this.treeKeys = [];
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.side {
	width: 220px;
	padding: 20px;
	height: 100%;
	position: relative;
	.deptTree {
		position: absolute;
		top: 95px;
		bottom: 0;
		left: 20px;
		right: 20px;
		padding-right: 10px;
		overflow: hidden;
		overflow-y: auto;
	}
}
.icon {
	height: 12px;
	width: 12px;
	vertical-align: -0.125em;
}
.ant-btn-yellow {
	color: #fff;
	background-color: #f8ac59;
	border-color: #f8ac59;
}
.ant-btn-yellow:hover {
	background-color: rgba(248, 172, 89, 0.8);
	border-color: rgba(248, 172, 89, 0.8);
	color: #fff;
}

.ant-btn-yellow:focus,
.ant-btn-yellow.active {
	background-color: rgba(248, 172, 89, 1);
	border-color: rgba(248, 172, 89, 1);
	color: #fff;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.icon-dept-other {
	color: @primary-color;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
	border: none;
}
</style>
